<template>
  <div>
    <el-dialog width="25%" v-bind="$attrs" v-on="$listeners"
               :visible.sync="showDialog"
               @open="onOpen" @close="onClose" title="添加新数据" center>

      <el-row >
        <el-form style="margin-right: 20px" ref="elForm" :model="finance" :rules="rules" size="medium" label-width="100px">

          <el-form-item label="报销人:" prop="claimerUserId">
            <el-select v-model="finance.claimerUserId">
              <el-option v-for="item in claimerUserIdOptions" :key="item.value"
                         :label="item.label" :disabled="item.disabled" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="报销事由:" prop="reason">
            <el-input v-model="finance.reason" clearable >
            </el-input>
          </el-form-item>

          <el-form-item label="收/支时间:" prop="createTime">
            <el-date-picker v-model="finance.createTime" type="date" placeholder="选择日期" clearable
                            format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="收支金额:" prop="sum">
            <el-input v-model="finance.sum" clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="报销类型:" prop="claimerUserId">
            <el-select v-model="finance.type">
              <el-option v-for="item in types" :key="item.value"
                         :label="item.label" :disabled="item.disabled" :value="item.value"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="报销日期:" prop="reasonTime">
            <el-date-picker v-model="finance.reasonTime" type="date" placeholder="选择日期" clearable
                            format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {saveFinance} from "@/api/main";

export default {
  name: 'FinanceInfoAdd',
  inheritAttrs: false,

  // 接受父组件传递的值
  props:{
    addVisible:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      // 控制弹出框显示隐藏
      showDialog:false,

      finance: {
        claimerUserId: undefined,
        reason: '',
        createTime: '',
        sum: '',
        type: undefined,
        reasonTime: '',
        recorderUserId: ''
      },
      rules: {
        claimerUserId: [{required: true, message: '请输入报销人', trigger: 'change'},
        ],
        reason: [{required: true, message: '请输入事由', trigger: 'blur'},
        ],
        createTime: [{required: true, message: '请输入收支时间', trigger: 'blur'},
        ],
        sum: [{required: true, message: '请输入收支金额', trigger: 'blur'},
        ],
        type: [{required: true, message: '请输入报销类型', trigger: 'change'},
        ],
        reasonTime: [{required: true, message: '请输入报销时间', trigger: 'blur'},
        ],
      },

      claimerUserIdOptions: [{
        "label": "团队",
        "value": 1
      }, {
        "label": "个人",
        "value": 2
      }],
      types: [{
        "label": "支出",
        "value": 1
      }, {
        "label": "收入",
        "value": 2
      }]
    }
  },

  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addVisible () {
      this.showDialog = this.addVisible
    },
  },
  created() {
  },

  mounted() {},

  methods: {
    onOpen() {
      this.finance.recorderUserId =  1
    },
//右上 × 符号
    onClose () {
      //清空当前弹窗数据
      this.finance = {}
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow', 'false')
    },
    close() {
      this.$emit('changeShow', 'false')
    },

    handelConfirm () {
      this.$refs['elForm'].validate(valid => {
        if (!valid) {
          return
        }
        console.log(this.finance)
        this.addFinance()
      })
    },

    //添加用户
    async addFinance () {
      const { data: res } = await saveFinance(this.finance)
      if (res.code === 200) {
        this.$notify.success({
          title: '操作成功',
          message: '用户注册或添加成功',
        })
        //重新调用父类中的方法
        this.$emit('reFresh')
        this.onClose()
      } else {
        return this.$message.error('用户注册或添加失败:' + res.message)
      }
    }
  }
}

</script>
<style>


</style>